<#include "/WEB-INF/default/fragment/header.ftl">
<body>

<#include "/WEB-INF/default/fragment/nav.ftl">

<style>
.workspace-stats {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #eee;
  box-sizing: border-box;
}
.workspace-stats a {
  color: #fff;
}
.workspace-stats.current {
  border: 1px solid #999;
}
.workspace-stats h4 {
  background-color: #eee;
  padding: 5px;
  text-align: center;
  margin: 0px;
  font-weight: 100;
}
.workspace-stats.current > h4 {
  background-color: #d00e31;
  color: #fff;
}
.workspace-stats ul,
.workspace-stats li {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.workspace-stats li {
  float: left;
  width: 14.285714285714%;
  text-align: center;
}
.workspace-stats > ul.weeks {
  height: 44px;
  line-height: 44px;
  border-bottom: 1px solid #999;
  box-sizing: content-box;
}
.workspace-stats .days li {
  height: 106px;
  border-bottom: 1px solid #999;
}

.workspace-stats > ul.calendar {
}

.workspace-stats > ul.calendar > li {
  position: relative;
}
.workspace-stats .days li.enable:hover {
  background-color: #eee;
}

.workspace-stats > ul.calendar > li > div.day {
  width: 16px;
  height: 16px;
  line-height: 16px;
  position: absolute;
  top: 0px;
  left: 2px;
  font-size: 12px;
  background: #eee;
  border-radius: 2px;
}
.workspace-stats > ul.calendar > li.passed-days {
  background-color: #eee;
}

.workspace-stats > ul.calendar > li.today > div.day {
  background-color: #d00e31;
  color: #fff;
}

.workspace-stats > ul.calendar > li > div.tips {
  position: absolute;
  margin: 0px 2px;
  font-size: 12px;
  text-align: left;
  padding: 0px 2px;
  border-radius: 2px;
  overflow: auto;
}
.workspace-stats > ul.calendar > li > div.tips.no-homework {
  bottom: 2px;
  background: rgb(39, 40, 34);
  color: #fff;
  height: 31px;
  overflow: auto;
}

.workspace-stats > ul.calendar > li > div.tips.stage-practice {
  bottom: 52px;
  background: #6B9E00;
  color: #fff;
}
.workspace-stats > ul.calendar > li > div.tips.exception {
  bottom: 35px;
  background: red;
  color: #fff;
}
.workspace-stats > ul.calendar > li > div.tips.task {
  bottom: 69px;
  background: #d00e31;
  color: #fff!important;
}
.workspace-stats > ul.calendar > li > div.op {
  position: absolute;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  width: 100%;
  font-size: 12px;
  overflow: hidden;
  height: 0;
  transition: all 0.2s linear;
}
.workspace-stats > ul.calendar > li > div.op.show {
  height: 28px;
  line-height: 28px;
  background: rgba(0,0,0,1);
}

.workspace-stats-desc {
  margin: 5px 0px;
}

.workspace-stats-desc div {
  font-size: 12px;
  padding: 0px 2px;
  border-radius: 2px;
  margin-top: 2px;
}
.workspace-stats-desc .homework-not-submit {
  background: rgb(39, 40, 34);
  color: #fff;
}

.workspace-stats-desc .stage-practice {
  background: #6B9E00;
  color: #fff;
}
.workspace-stats-desc .exception {
  background: red;
  color: #fff;
}
.workspace-stats-desc .task {
  background-color: #d00e31;
  color: #fff;
}

.tech-item {
}

</style>

<script>
var beginDate = new Date(${(team.gmtBegin*1000)?c});
var endDate = new Date(${(team.gmtEnd*1000)?c});
var tasks = ${tasks!"[]"};
</script>

<div class="container">
  <div class="tms-logo"><img class="center-block" src="${request.contextPath}/assets/images/logo.png" alt=""></div>
</div>

<div class="container">
  <div class="tech-item-header">
    <div class="clearfix">
      <h4 class="pull-left"><a style="color:#d00e31;" href="${request.contextPath}/team-detail.action?team.id=${team.id}">${team.name}</a></h4>
      <h4 class="pull-right">今天是<span id="today">${today?string("yyyy年MM月dd日")}，教学完成度0.00%</span></h4>
    </div>
    <div id="study_process" style="height: 2px; background-color: #999; width: 100%;margin-top: 10px;">
      <div id="finished_process" style="height: 2px; background-color: rgb(208, 15, 50); width: 0; transition: all 2s linear;"></div>
    </div>
    <script type="text/javascript">
    </script>
  </div>
</div>

<style>
  .row {
    margin: 10px 0 10px 0;
  }
  .row.title {
    border-bottom: 1px solid #eee;
  }
  .row.body {
  }

  .row.body > ul {
    margin: 0;
    padding: 0;
  }
  .row.body > ul > li {
    list-style: none;
    margin-right: 10px;
  }
</style>
<div class="container">
  <div class="row title clearfix">
    <div class="pull-left"><h5>项目管理</h5></div>
    <div class="pull-right"><a class="btn btn-link" href="${request.contextPath}/project-post.action?teamId=${team.id?html}">添加项目</a></div>
  </div>
  <div class="row body clearfix">
    <ul>
      <#list projects as m>
      <li class="pull-left"><a href="${request.contextPath}/task-list.action?project_id=${m.id}">${m.title?html}</a></li>
      </#list>
    </ul>
  </div>
</div>

<div class="container">
  <div class="row title clearfix">
    <div class="pull-left"><h5>团队成员</h5></div>
    <div class="pull-right"><a class="btn btn-link" href="${request.contextPath}/team-invite.action?team.id=${team.id?html}">邀请成员</a></div>
  </div>
  <div class="row body clearfix">
    <ul>
      <#list members as m>
      <li class="pull-left">
        <a href="${request.contextPath}/user-${m.id}.action">${m.nickname?html}</a>
      </li>
      </#list>
    </ul>
  </div>
</div>

<div class="container">
  <div class="row title clearfix">
    <div class="pull-left"><h5>任务列表（top 20）</h5></div>
    <div class="pull-right"></div>
  </div>
  <div class="row body clearfix">
    <#list taskArray as t>
    <a class="label label-default" href="${request.contextPath}/task-detail.action?task.id=${t.id}">${t.title?html}</a>
    </#list>
  </div>
</div>


<div class="container tech-item">
  <div class="workspace-stats-container">
    <!-- 按月份显示日历 -->
  </div>
  <div class="workspace-stats-desc">
    <div class="homework-not-submit">作业未提交</div>
    <div class="stage-practice">阶段练习，在页面中的阶段练习部分会有打分和参与情况统计</div>
    <div class="exception">异常学员，迟到或早退或旷课且未事先知会项目经理或者教学经理，以打卡机记录为准。</div>
    <div class="task">课程安排，任务记录等。</div>
  </div>

  <script id="workspace_stats_html" type="text/html">
    <div id="workspace_stats_{{month}}" class="workspace-stats" data-month="{{month}}">
      <h4 class=""><!--月份显示处--></h4>
      <ul class="weeks clearfix">
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
        <li>星期日</li>
      </ul>
      <ul class="calendar days clearfix"><!--日历显示处--></ul>
    </div>
  </script>

</div>

</div>

<script>
(function(currentYear, currentMonth, today) {
    if (typeof beginDate  == 'undefined'
        || typeof endDate  == 'undefined') {
        alert('请注意，实训期间数据格式不正确');
        return;
    }

    // 渲染教学进度
    (function(allProcess) {
        var per = "<@team_process team.gmtBegin team.gmtEnd />";
        document.getElementById('finished_process').style.width = per;
        document.getElementById('today').innerHTML = '${(now*1000)?number_to_datetime?string["yyyy年MM月dd日"]}' + ('，教学完成度' + per);
    })();

    // 渲染日历
    var $container = $('.workspace-stats-container');
    for (var year = beginDate.getFullYear(); year <= endDate.getFullYear() ;year++) {
        var initMonth = 1, endMonth = 12;
        if (year == beginDate.getFullYear()) {
            initMonth = (beginDate.getMonth() + 2);
        }
        if (year == endDate.getFullYear()) {
            endMonth = (endDate.getMonth() + 1);
        }
        for (var month = initMonth; month <= endMonth ; month++) {
            var html = $('#workspace_stats_html').html();
            html = html.replace(/\{{month}}/gi, month);
            $container.append(html);
            $(('#workspace_stats_' + month) + ' > h4').html(year + '年' + (month) + '月');

            var d = new Date();
            var beginDay = (new Date(d.getFullYear(), month-1, 0).getDay()); // 这个月 1 号是星期几
            var curMonthDays = new Date(d.getFullYear(), month, 0).getDate(); // 本月天数
            var $box = $(('#workspace_stats_' + month) + ' > ul.calendar');
            $box.hide();
            for (var i = 0, j = 0; i < (curMonthDays + beginDay); i++) {
                if (i < beginDay) {
                    $box.append('<li>&nbsp;</li>');
                    continue;
                }
                ++j;

                var task = tasks[year + '' + month + '' + j];
                console.log(task, (year + '' + month + '' + j));
                var content = '<div class="day"> ' + j + '</div>';

                                if (typeof(task) == 'undefined'
                    || task.length == 0) {
                } else {
                    content += '<div class="tips task" title="作业和任务">';
                    for (var t in task) {
                      content += '<a href="${request.contextPath}/task-detail.action?task.id='+task[t]['id']+'" title=' + task[t]['desc'] + '> ' + task[t]['title'] + '</a>';
                    }
                    content += '</div>';
                }

                content += '<div class="op"><a class="j_task" href="###" data-date="' + (year + '-' + month + '-' + j) +'" data-team-id="${team.id}">任务</a>&nbsp;<a class="j_attendance" href="###" data-team-id="${team.id}">考勤</a></div>'

                var clazz = '';
                if (month == (currentMonth + 1) ) {
                    if (j == today) {
                        clazz = 'today';
                    } else if (j < today) {
                        clazz = 'passed-days';
                    }
                } else {
                    clazz = 'passed-days';
                }
                $box.append('<li class="enable ' + clazz + '">' + content + '</li>');
            }
        }
    }

    $(document).on('click', '.workspace-stats h4', function() {
        $(this).siblings('ul.calendar').toggle();
    });
    $(('#workspace_stats_' + (currentMonth + 1))).addClass('current');
    $(('#workspace_stats_' + (currentMonth + 1)) + ' > h4').click();
})((new Date()).getFullYear(),(new Date()).getMonth(), (new Date()).getDate());

$(document).on('mouseover', '.workspace-stats > ul.calendar > li', function() {
  $(this).find('.op').addClass('show');
});
$(document).on('mouseleave', '.workspace-stats > ul.calendar > li', function() {
  $(this).find('.op').removeClass('show');
});
$(document).on('click', '.j_task', function() {
  var teamId = $(this).attr('data-team-id');
  var date = $(this).attr('data-date');
  var now = new Date();
  var time = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
  date = date + ' ' + time;
  window.location.href = '${request.contextPath}/task-post.action?team.id=${team.id}&date='+date;
  return false;
});

</script>

</body>
<#include "/WEB-INF/default/fragment/footer.ftl">
